;(function($){
    $.slideContent = {
        setting:{},
        counter:0,
        slideOut:function(sliderID,toggleSelector,url,title){
            var setting = $.slideContent.setting[sliderID];
            var slider = setting.slider;
            var animateType = {width:'+='+setting.width};
            if(title != null) {
                var html = slider.find('div#control').detach();
                slider.find('.heading').html(title);
                slider.find('.heading').append(html);
            }
            if(setting.side == 'left')
                $.extend(animateType,{left:'-='+setting.width});
            if(slider.attr('show') != 'show') {
                $(slider).attr('show','show');
                $(slider).animate(animateType, 600, function(){
                    $.slideContent.loadContent(slider,url);
                });
                $(slider).children('div').animate({left:0}, 600);
            }
            else
                $.slideContent.loadContent(slider,url);
            $("[slider='slider']").removeAttr('slider')
            toggleSelector.attr('slider','slider');
        },
        loadContent:function(slider,url){
            $(slider).children('div#body').subcontent({url:url});
        },
        slideIn:function(sliderID) {
            var setting = $.slideContent.setting[sliderID];
            var slider = setting.slider;
            var animateType = {width:'-='+setting.width};
            if(setting.side == 'left')
                $.extend(animateType,{left:'+='+setting.width});
            $(slider).animate(animateType, 600, function(){
                slider.children('div#body').empty();
            });
            $(slider).children('div').animate({left:'-='+setting.width}, 600);
            $("[slider='slider']").removeAttr('slider');
            $(slider).removeAttr('show');
        }
    }
    $.fn.ToggleSlide = function(id,url,title) {
        if($(this).attr('slider') == 'slider')
            $.slideContent.slideIn(id);
        else
            $.slideContent.slideOut(id,$(this),url,title)
    }
    $.fn.slideContent = function(options) {

        $.slideContent.counter += 1;
        var mainContainer = $(this);
        var slideContent = "slideContent_"+$.slideContent.counter;
        var ID = mainContainer.attr('id');
        var posleft = mainContainer.position().left;
        mainContainer.after("<div id='"+slideContent+"' class='slider_container'><div class='heading ui-widget-header'>Slider container<div id='control'><a id='close' href='#' onClick='$.slideContent.slideIn(\""+ID+"\"); return false;'>Close</a></div></div><div id='body' class='clear'></div></div>");
        var slideContainer = $('#'+slideContent);
        var setting = $.slideContent.setting[ID] = $.extend({
            visable:false,
            slider:$(slideContainer),
            side:'right',
            width:'320',
            height:'600',
            toggleObj:''
        },options || {});
        if(setting.side == 'right')
            posleft += mainContainer.outerWidth(true);
        var bodyWidth = setting.width;
        $.slideContent.setting[ID].width = parseInt($.slideContent.setting[ID].width)+20+'px';
        $.slideContent.setting[ID].height = parseInt($.slideContent.setting[ID].height)+'px';
        // setting slider css properties
        slideContainer.css('left',posleft);
        slideContainer.css('top',mainContainer.position().top);
        slideContainer.css('max-height',$(window).height()-mainContainer.position().top-5);
        slideContainer.children('div#body').css('max-height',$(window).height()-mainContainer.position().top-slideContainer.children('div.heading').outerHeight()-20);
        slideContainer.children('div').width(bodyWidth+'px')
        slideContainer.children('div').css('left','-'+bodyWidth+'px');
    };
})(jQuery);